<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-color: white;
            margin: 0;
            position: relative;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            cursor: pointer;
        }
        p{
            margin: 0;
            padding: 0;
        }
        .flex{
            display: flex;
        }
        .title-logo{
            justify-content: space-around;
        }
        .title-word{
            font-size: 35px;
        }
        .out-class{
            background-color: #ddd;
            width: 100%;
            position: absolute;
            top: 150px;
        }
       
        .out-class>li{
            margin-left: 100px;
        }
        .in-ul>li{
            margin-top: 20px;
            font-size: 18px;
        }
        .title-img{
            position: relative;
        }
    </style>
     <link rel="stylesheet"type="text/css" href="css/style2.css">
</head>
<body>
    <div class="title-img">
        <ul class="flex title-logo">
            <li><img src="./images/shop.png" id="img-one" width="150" height="150" alt=""></li>
            <li><img src="./images/truck.png" id="img-one1" width="150" height="150" alt=""></li>
            <li style="width: 300px;font-size: 35px;height: 150px;line-height: 150px;color: red;">Are you Hungry?</li>
            <li><img src="./images/cellphone.png"  id="img-one3" width="150" height="150" alt=""></li>
            <li><img src="./images/user.png"  id="img-one4" width="150" height="150" alt=""></li>
        </ul>
        <ul class="flex out-class show1" >
            <li>
                <span class="title-word">sort by</span>  
                <ul class="in-ul">
                    <li>all</li>
                    <li>barkety</li>
                    <li>cate</li>
                    <li>fast food</li>
                </ul>
            </li>
            <li>
               <span class="title-word">drinks</span> 
                <ul class="in-ul">
                    <li>mike tea</li>
                    <li>frappe</li>
                </ul>
            </li>
        </ul>
        <ul class="flex out-class show2" style="display: none;">
            <li>
                <span class="title-word">sort by222</span>  
                <ul class="in-ul">
                    <li>all</li>
                    <li>barkety</li>
                    <li>cate</li>
                    <li>fast food</li>
                </ul>
            </li>
            <li>
               <span class="title-word">drinks222</span> 
                <ul class="in-ul">
                    <li>mike tea</li>
                    <li>frappe</li>
                </ul>
            </li>
        </ul>
        <ul class="flex out-class show3" style="display: none;">
            <li>
                <span class="title-word">sort by222</span>  
                <ul class="in-ul">
                    <li>all</li>
                    <li>barkety</li>
                    <li>cate</li>
                    <li>fast food</li>
                </ul>
            </li>
            <li>
               <span class="title-word">drinks222</span> 
                <ul class="in-ul">
                    <li>mike tea</li>
                    <li>frappe</li>
                </ul>
            </li>
        </ul>
        <ul class="flex out-class show4" style="display: none;">
            <li>
                <span class="title-word">sort by222</span>  
                <ul class="in-ul">
                    <li>all</li>
                    <li>barkety</li>
                    <li>cate</li>
                    <li>fast food</li>
                </ul>
            </li>
            <li>
               <span class="title-word">drinks222</span> 
                <ul class="in-ul">
                    <li>mike tea</li>
                    <li>frappe</li>
                </ul>
            </li>
        </ul>
        <div style="margin-top:300px">
            <div class="footer">
                <div class="contain">
                <div class="col">
                  <h1>About</h1>
                  <ul>
                      <li><a href="ourstory.html">Our Story</a></li>
                    <li>Sustainability</li>
                    <li><a href="about.html">Our Founder</a></li>
                  </ul>
                </div>
                <div class="col">
                  <h1>Services</h1>
                  <ul>
                      <li><a href="contact.html">Contact Us</a></li>
                      <li>Delivery</li>
                    <li>Ordering & Payment</li>
                    <li>FAQ</li>
                    
              
                  </ul>
                </div>
              
                <div class="col">
                  <h1>Polices</h1>
                    <li>Privacy Policy</li>
                    <li>Term of Use</li>
                  </ul>
                </div>
              
                <div class="col">
                  <h1>      </h1>
                  <ul>
                    <li>Feedback</li>
                  </ul>
                </div>
                <div class="col social">
                  <h1>Social</h1>
                  <ul>
                    <li><img src="./images/ins.png" width="32" style="width: 32px;"></li>
                    <li><img src="./images/twi.jpg" width="32" style="width: 32px;"></li>
                    <li><img src="./images/fb.png" width="32" style="width: 32px;"></li>
                  </ul>
                </div>
              <div class="clearfix"></div>
              </div>
              </div>
        </div>
    </div>
    <script src="./js/jquery.js">
    </script>
    <script >
        function allhide(){
            $(".show1").hide()
            $(".show2").hide()
            $(".show3").hide()
            $(".show4").hide()
        }
         $(".show1").show()
        $("#img-one").mouseenter(function(){
            $(".show1").show()
        }).mouseleave(function(){
            $(".show1").hide()
        })
        $("#img-one1").mouseenter(function(){
            $(".show2").show()
        }).mouseleave(function(){
            $(".show2").hide()
        })
        $("#img-one3").mouseenter(function(){
            $(".show3").show()
        }).mouseleave(function(){
            $(".show3").hide()
        })
        $("#img-one4").mouseenter(function(){
            $(".show4").show()
        }).mouseleave(function(){
            $(".show4").hide()
        })
    </script>
</body>
</html>